<template>
	<!-- <view class="main-class"> -->
	<z-paging ref="paging" v-model="goodsData" @query="queryList" >	
		<template #top>

				<view class="status_bar" style="height: var(--status-bar-height); width: 100%; "></view>
				<view class="header-container" style="z-index: 20090; opacity: 1;">
					
					<!-- 顶部工具栏 -->
					<view class="toolbar" style="z-index: 20090;">
						<view 
							class="client-info" 
							@click.stop.prevent="selClient" 
							style="z-index: 99999; position: relative;"
						>
							<view class="client-avatar">
								<tn-icon name="shop" :color="mainColor" size="32" />
							</view>
							<view class="client-info-content">
								<text class="client-name text-cut">{{hz.businessname}}</text>
								<tn-icon name="down" :color="mainColor" size="24" />
							</view>
						</view>
						
						<view class="shopping-cart" @click="toDoShopping">
							<tn-badge :value="store.state.shopingBadge" type="danger">
								<tn-icon name="cart" size="40" :color="mainColor"/>
							</tn-badge>
						</view>
					</view>
					
					<!-- 搜索区域 -->
					<view class="search-box">
						<tn-search-box
							v-model="searchValue"
							@input="searchInputEvent"
							@search="searchBtnClickEventPage"
							@focus="searchInputFocusEvent"
							@clear="searchClearEvent"
							placeholder="搜索商品名称、规格、厂家"
							placeholder-icon="search"
							:border-color="mainColor"
							text-color="#333333"
							placeholder-color="#999999"
							:search-button-bg-color="mainColor"
							ref="searchBoxRef"
						/>
					</view>

					<!-- 分类导航 -->
					<view class="nav-container">
						<!-- 排序选项 -->
						<view class="nav-group" v-if="sortData.length>0">
							<scroll-view scroll-x class="scroll-view" show-scrollbar="false">
								<view class="nav-list">
									<view 
										v-for="(item, index) in sortData" 
										:key="index"
										class="nav-item"
										:class="{'is-active': index === sortIndex}"
										@click="sortClickPage(item.text)"
									>
										{{item.text}}
									</view>
								</view>
							</scroll-view>
						</view>

						<!-- 部门选项 -->
						<view class="nav-group tn-pl-sm tn-pr-sm">
							<scroll-view scroll-x class="scroll-view" show-scrollbar="false">
								<view class="nav-list ">
									<view 
										v-for="(item, index) in saleDeptData" 
										:key="index"
										class="nav-item"
										:class="{'is-active': index === currentTabsIndex}"
										@click="saleDeptClickPage(item.saledeptid)"
									>
										{{item.saledeptname}}
									</view>
								</view>
							</scroll-view>
						</view>
					</view>
				</view>
			 	
		</template>
		
		
		<view class="cards-class">
			<view class="product-card" v-for="(item,index) in goodsData" :key="index">
				<view class="product-image">
					<image :src="item.imgurl" mode="aspectFit" @tap="handleImageTap(item.imgurl)" @error="imgerror(index)"/>
				</view>
				<view class="product-content">
					<view class="product-title">{{item.goodsname}}</view>
					<view class="product-info">
						<text class="manufacturer">{{item.manufacturer}}</text>
						<text class="spec">{{item.specunitinfo}}</text>
					</view>
					<view class="batch-info" @click="onShowBatch(item)">
						<text class="batch">{{item.batchcodeinfo}}</text>
						<text class="date">{{item.valdateinfo}}</text>
					</view>
					<view class="stock-row" @click="onShowBatch(item)">
						<text class="stock">{{item.stock}}</text>
						<text class="total-stock">{{item.sumstock}}</text>
					</view>
					<view class="price-row">
						<text class="sale-price">{{item.salepriceinfo}}</text>
						<text class="retail-price">零售价: ¥{{item.retailpinfo}}</text>
					</view>
					
					<view class="action-section">
						<view class="quantity-control">
							<text class="control-btn" @click="reduceNum(item)">-</text>
							<input type="number" v-model="item.num" class="quantity-input"/>
							<text class="control-btn" @click="addNum(item)">+</text>
						</view>
						
						<view class="price-inputs" v-if="item.oldinnerprice || item.oldtaxprice==null">
							<input 
								v-if="item.oldinnerprice"
								type="digit" 
								v-model="item.innerprice" 
								class="settle-input"
								placeholder="结算价"
							/>
							<input 
								v-if="item.oldtaxprice==null"
								type="digit" 
								v-model="item.taxprice" 
								class="price-input"
								:placeholder="item.lastsalepriceinfo"
							/>
						</view>
						
						<view class="add-cart" @click="addShopping(item)">
							<tn-icon name="cart-fill" size="40" color="#ffffff"></tn-icon>
						</view>
					</view>
					
					<text class="notice-text" v-if="item.isshow=='N'">{{item.showinfo}}</text>
				</view>
			</view>
		</view>
		<tn-popup v-model="showPopup">
			<view class="tn-p-lg popup-class" v-if="oneTableHead.length>0">
				<th-table :column="oneTableHead" :listData="oneTableData"  height="0.5" :border="true" :loading="false" >
				</th-table>
			</view>
			<view class="tn-p-lg popup-class-title" v-if="goodsDescInfo.length>0">
				<tn-title title="商品描述" mode="vLine" assist-color="tn-red" />
				<view v-for="(item,index) in goodsDescInfo" :key="index">
					
					<view class="tn-pt tn-text-ellipsis-4">{{item.title}}</view>
				</view>
			</view>
		</tn-popup>
	</z-paging>	
	
	
</template>

<script setup>
	import Shop from '@/pages/shop/shop.vue'
	import { ref,reactive,onMounted} from "vue"
	import TnDropdown from 'tnuiv3p-tn-dropdown/index.vue'
	import { postCall  } from '@/api/index.js'
	import { createParams,pinToTop,isHeaderClass } from '@/utils/utils.js'
	import { EventBus } from '@/mitt/EventBus.js';
	import { toastMessage } from '@/utils/toast.js'
	import dayjs from "dayjs";
	import {userAllDataStore} from '@/stores'
	import { getPlatformClass, getCSSVariable } from '@/utils/platform.js'
	const store = userAllDataStore();
	const headerClass = ref('');
	const procName = "PROC_APP_DO_CLASSIFY";
	const procNameShop = "PROC_APP_DO_SHOPPING"
	const page = ref(1);
	const pageCount = ref(20);
	let currentTabsIndex = ref(0)
	let sortIndex = ref(0);
	let showPopup = ref(false)
	const searchBoxRef = ref(null);
	const isImageAccessible = (url) => {
	  const img = new Image();
	  img.src = url;
	  return img.complete && img.naturalWidth !== 0;
	};
	const rootElement = ref(null);
	const mainColor = ref(store.state.mainColor);
	const whiteColor = ref("#ffffff");
	const imgerror = (index)=>{
		if(goodsData.value.length>0){
			goodsData.value[index].imgurl = noneGoodsImageUrl.value;
		}
	}
	
	const hz = reactive({
		"businessid":"",
		"businesscode":"",
		"businessname":"请选择客户"
	})
	
	const paging = ref(null)
	
	let pageInfo = {
		P_PAGE : 1 ,
		P_PAGESIZE : 10
	}
	
	const onShowBatch = (item) =>{
		showPopup.value = true;
		doGetOneTableHead();
		doGetOneTableData(item);
		doGetGoodsDescData(item);
	}
	const navigateToType = ref('');
	const searchClearEvent = () =>{
		navigateToType.value = 'CLEAR';
		console.log("===");
		queryList(1,10);
	}
	const queryList = async (pageNo, pageSize) =>{
		pageInfo.P_PAGE = pageNo;
		pageInfo.P_PAGESIZE = pageSize;
		let params = {};
		params["P_PROC_NAME"] = procName;
		params["P_ACTION"] = "GOODS";	
		params["P_CLIENTID"] = hz.businessid;
		params["P_SALEDEPT"] = saleDept;
		params["P_CON"] = searchValue.value;
		params["P_SORT"] = sort.value;
		console.log(searchValue.value || searchValue.value=="" )
		if(!searchValue.value || searchValue.value==""){
			params["P_CON"] = await uni.getStorageSync("GOODS");
		}
		await postCall(Object.assign(params,pageInfo)).then(res=>{
			if(res){
				if(res.code===200 || res.code === 1000){
					paging.value.complete(res.data.DATASET);
					if(uni.getStorageSync("GOODS")){
						uni.removeStorageSync("GOODS")
					}
					// console.log("============================");
					// console.log(res.data.DATASET);
					if(res.data.DATASET === undefined ){
						for(let i=0;i<saleDeptData.length;i++){
							if(saleDeptData[i].saledeptid==saleDept){
								toastMessage("【"+saleDeptData[i].saledeptname + "】暂无数据")
							}
						}
					}
				}
			}
		}).catch(res =>{
			paging.value.complete(false);
		})
		navigateToType.value = "INPUT";
	}
	
	const searchBtnClickEventPage = () =>{
		paging.value.reload();
	}
	
	let saleDeptClickPage = (val) => {
		uni.setStorageSync("SALEDEPT", val || "000");
		saleDept = val || "000";
		
		// Update the currentTabsIndex to match the selected department
		for (let i = 0; i < saleDeptData.length; i++) {
			if (saleDeptData[i].saledeptid == saleDept) {
				currentTabsIndex.value = i;
				break;
			}
		}
		
		// Reload the data
		paging.value.reload();
		
		// Check if data is empty and show message if needed
		if (goodsData.value.length == 0) {
			for (let i = 0; i < saleDeptData.length; i++) {
				if (saleDeptData[i].saledeptid == saleDept) {
					toastMessage("【" + saleDeptData[i].saledeptname + "】暂无数据");
				}
			}
		}
	}
	
	let sort = ref('');
	let sortClickPage = (val) =>{
		uni.setStorageSync("SORT",val);
		sort.value = val;
		paging.value.reload();
		
	}
	
	let addNum = (item) =>{
		item.num ++;
	}
	
	let reduceNum = (item) =>{
		item.num --;
		if(item.num<0){
			item.num = 0;
		}
	}
	
	let noneGoodsImageUrl = ref("");
	
	let saleDept = "000";
	onMounted(() => {
		console.log('rootElement:', rootElement);
		console.log('rootElement.value:', rootElement.value);
		console.log('getComputedStyle available:', typeof getComputedStyle);
		
		// 强制移除遮挡的tabbar占位符元素
		setTimeout(() => {
			try {
				// 查找并移除所有可能的tabbar占位符
				const selectors = [
					'.tn-tabbar__placeholder',
					'.tn-tabbar__placeholder.tn-u-safe-area',
					'uni-view.tn-tabbar__placeholder',
					'uni-view.tn-tabbar__placeholder.tn-u-safe-area'
				];
				
				selectors.forEach(selector => {
					const elements = document.querySelectorAll(selector);
					elements.forEach(el => {
						if (el) {
							el.style.display = 'none';
							el.style.height = '0';
							el.style.width = '0';
							el.style.zIndex = '-9999';
							el.style.pointerEvents = 'none';
							el.style.visibility = 'hidden';
							el.style.opacity = '0';
							el.style.position = 'absolute';
							el.style.top = '-999999px';
							el.style.left = '-999999px';
							console.log('已移除tabbar占位符:', selector);
						}
					});
				});
			} catch (e) {
				console.log('移除tabbar占位符时出错:', e);
			}
		}, 100);
		
		// 设置定期检查，确保遮挡元素被持续移除
		const checkInterval = setInterval(() => {
			try {
				const tabbarPlaceholder = document.querySelector('.tn-tabbar__placeholder');
				if (tabbarPlaceholder) {
					tabbarPlaceholder.style.display = 'none';
					tabbarPlaceholder.style.pointerEvents = 'none';
					console.log('持续移除tabbar占位符');
				}
			} catch (e) {
				// 忽略错误
			}
		}, 1000);
		
		// 5秒后停止检查
		setTimeout(() => {
			clearInterval(checkInterval);
		}, 5000);
		
		// 使用平台适配工具获取CSS变量
		mainColor.value = getCSSVariable('--mainColor', '#6bb7ec');
		console.log('获取到的mainColor:', mainColor.value);
		
		headerClass.value = getPlatformClass();
		console.log('headerClass.value:', headerClass.value);
		// headerClass.value = isHeaderClass();
		doGetSaleDept().then(res=>{
			console.log("=="+JSON.stringify(saleDeptData));
			saleDept = uni.getStorageSync("SALEDEPT") || "000";
			if(saleDept){
				for(let i=0;i<saleDeptData.length;i++){
					if(saleDeptData[i].saledeptid==saleDept){
						currentTabsIndex.value = i;
						console.log(currentTabsIndex.value);
					}
				}
			}
			doGetSort();
			doGetClientData().then(res=>{
				doGetClient();
				paging.value.reload();
			})
		})
		// saleDept = uni.getStorageSync("SALEDEPT");
		// console.log(saleDept);
		// if(saleDept){
			
		// 	for(let i=0;i<saleDeptData.length;i++){
				
		// 		if(saleDeptData[i].saledeptid==saleDept){
		// 			currentTabsIndex.value = i ;
		// 			console.log(currentTabsIndex.value);
		// 		}
		// 	}
		// 	paging.value.reload();
			
		// }else{
		// 	// doGetGoods();
		// 	paging.value.reload();
		// }
	 //    doGetClientData().then(res=>{
		// 	console.log("====");
	 //    	doGetClient();
	 //    });
		
		EventBus.on('clientInfo', (objParam) => {
			Object.assign(hz,objParam);
			doGetClientWarnData();
			// doGetGoods();
			// paging.value.reload();
		});
		
		EventBus.on('goodsInfo', async (objParam) => {
			// console.log(objParam);
			searchValue.value = objParam;
			navigateToType.value = "INPUT";
			await doGetGoods();
			// queryList(1,10);
		});
		
		const httpUrl = uni.getStorageSync("HTTP");
		noneGoodsImageUrl.value  =  httpUrl+'/static/none.png';
	});
	
	const clientWarnData = reactive([]);
	
	let doGetClientWarnData = () =>{
		clientWarnData.length = 0;
		let params = {};
		params["P_PROC_NAME"] = procName;
		params["P_ACTION"] = "CLIENTWARN";	
		params["P_CLIENTID"] = hz.businessid;
		postCall(params).then(res=>{
			if(res){
				if(res.code===200){
					Object.assign(clientWarnData,res.data.DATASET);
					if(clientWarnData.length>0){
						let info = "";
						for(let i=0;i<clientWarnData.length;i++){
							info = info + clientWarnData[i].titleinfo + "\n";
						}
						
						modalRef.value?.showModal({
						  title: '温馨提示',
						  content: info,
						  showCancel: false,
						})
					}
				}
			}
		})
	}
	
	
	let saleDeptClick = (val) =>{
		uni.setStorageSync("SALEDEPT", val || "000");
		saleDept = val || "000";
		doGetGoods();
	}
	let doGetClient = () =>{
		let clientInfo = uni.getStorageSync("CLIENTINFO");
		Object.assign(hz,clientInfo);
	}
	
	
	let goodsData = ref([]);
	
	let doGetGoods = async () =>{
		goodsData.value.length = 0;
		let params = {};
		params["P_PROC_NAME"] = procName;
		params["P_ACTION"] = "GOODS";	
		params["P_CLIENTID"] = hz.businessid;
		params["P_SALEDEPT"] = saleDept;
		params["P_CON"] = searchValue.value;
		params["P_SORT"] = sort.value;
		await postCall(Object.assign(params,pageInfo)).then(res=>{
			if(res){
				if(res.code===200){
					goodsData.value = res.data.DATASET;
				}
				console.log(res.data.DATASET);
				if(res.data.DATASET === undefined ){
					for(let i=0;i<saleDeptData.length;i++){
						if(saleDeptData[i].saledeptid==saleDept){
							toastMessage("【"+saleDeptData[i].saledeptname + "】暂无数据")
						}
					}
				}
			}
			
		})
	}
	
	const saleDeptData = reactive([]);
	let doGetSaleDept = async () =>{
		let params = {};
		params["P_PROC_NAME"] = procName;
		params["P_ACTION"] = "SALEDEPT";		
		await postCall(Object.assign(params,createParams(pageInfo))).then(res=>{
			if(res){
				if(res.code===200){
					Object.assign(saleDeptData,res.data.DATASET);
				}
			}
			
		})
	}
	const sortData = reactive([]);
	let doGetSort = async () =>{
		let params = {};
		params["P_PROC_NAME"] = procName;
		params["P_ACTION"] = "SORT";		
		await postCall(Object.assign(params,createParams(pageInfo))).then(res=>{
			if(res){
				if(res.code===200){
					Object.assign(sortData,res.data.DATASET);
				}
			}
			
		})
	}
	let doGetClientData = async () =>{
		let params = {};
		params["P_PROC_NAME"] = procName;
		params["P_ACTION"] = "CLIENT";		
		params["P_PAGE"] = 1;
		params["P_PAGESIZE"] = 10;
		await postCall(params).then(res=>{
			if(res){
				console.log(res);
				if(res.code===200){
					if(res.data.DATASET.length ===1 ){
						Object.assign(hz,res.data.DATASET[0]);
					}
				}
			}
		})
	}
	
	
	
	let selClient = () =>{
		console.log("===");
		uni.navigateTo({
			url: '/pages/classify/client'
		})
	}
	const searchValue = ref('')
	const currentSwiperIndex = ref(1)
	const placeholderStyle = reactive({
		color:"#000000"
	})
	
	const searchInputEvent = () =>{
		
	}
	const searchInputFocusEvent = () =>{
		store.state.tempSearchValue = searchValue.value;
		// console.log(store.state.tempSearchValue)
		// if(navigateToType.value!='CLEAR'){
		// 	uni.navigateTo({
		// 		url: '/pages/classify/search'
		// 	})
		// }
		
	}
	const searchBtnClickEvent = () =>{
		
	}
	const openDropdown = ref(false);
	
	const numValue = ref()
	const priceValue = ref()
	
	
	const oneTableHead = reactive([]);
	const oneTableData = reactive([]);
	
	let doGetOneTableHead = () =>{
		let params = {};
		params["P_ACTION"] = "ONE_TABLE_HEAD";
		params["P_PROC_NAME"] = procName;
		postCall(params).then(res=>{
			Object.assign(oneTableHead,res.data.DATASET);
			console.log(oneTableHead)
		})
	}
	let doGetOneTableData = (item) =>{
		oneTableData.length = 0;
		let params = {};
		params["P_ACTION"] = "ONE_TABLE_DATA";
		params["P_PROC_NAME"] = procName;
		postCall(Object.assign( createParams(item) , params)).then(res=>{
			if(res){
				Object.assign(oneTableData,res.data.DATASET);
				console.log(oneTableData)
			}
			
		})	
	}
	
	let goodsDescInfo = reactive([]);
	let doGetGoodsDescData = (item) =>{
		goodsDescInfo.length = 0;
		let params = {};
		params["P_ACTION"] = "GOODSDESC";
		params["P_PROC_NAME"] = procName;
		postCall(Object.assign( createParams(item) , params)).then(res=>{
			if(res){
				Object.assign(goodsDescInfo,res.data.DATASET);
			}
		})	
	}
	
	let handleImageTap=(val)=>{
		uni.previewImage({
			urls: [val], // 要预览的图片链接列表
			current: 0, // 当前显示图片的链接（必须是urls中的一个），索引从0开始
		});
	}
	
	
	
	const modalRef = ref()
	
	const addShopping= (val)=>{
		if(val.valdate && val.nddays){
			const days =  dayjs(val.valdate ).diff(dayjs(), 'day');
			console.log(days);
			if(days<= parseInt(val.nddays) ){
				 modalRef.value?.showModal({
				  title: '提示',
				  content: '此品种为近效期品种，近效期剩余'+days+'天，是否确认选择',
				  showCancel: true,
				  cancel: () => {
				    
				  },
				  confirm: () => {
				    add(val);
				  },
				})
			}else{
				add(val);
			}
		}else{
			add(val);
		}
		
		
	}
	
	let doGetShoppingCount = () =>{
		let params = {};
		params["P_PROC_NAME"] = procNameShop;
		params["P_ACTION"] = "QUERYALLCOUNT";
		postCall(params).then(res=>{
			if(res){
				if(res.code===200){
					if(res.data.DATASET.length>0){
						store.state.shopingBadge = res.data.DATASET[0].sumcount;
					}
					toastMessage("添加成功！");
				}
			}
		})
	}
	
	const add = (val)=>{
		let params = {};
		params["P_PROC_NAME"] = procNameShop;
		params["P_CLIENTID"] = hz.businessid;
		params["P_GOODSID"] = val.goodsid;
		params["P_TAXPRICE"] = val.taxprice;
		params["P_NUM"] = val.num;
		params["P_ADDRESSID"] = hz.addressid;
		params["P_RECEMANID"] = hz.recemanid;
		params["P_SALEDEPTID"] = val.saledeptid;
		params["P_INNERPRICE"] = val.innerprice;
		if(val.addcheck != undefined && val.addcheck=='1'){
			params["P_ACTION"] = "ADDCHECK";
			postCall(Object.assign(createParams(val),params)).then(res=>{
				console.log(res);
				if(res){
					if(res.code===200){
						modalRef.value?.showModal({
						  title: '提示',
						  content: '此品种购物车已存在，是否继续添加！',
						  showCancel: true,
						  cancel: () => {
						    
						  },
						  confirm: () => {
						    params["P_ACTION"] = "ADD";
						    postCall(Object.assign(createParams(val),params)).then(res=>{
						    	if(res){
						    		if(res.code===200){
						    			doGetShoppingCount();
						    		}
						    	}
						    })
						  },
						})
					}else if(res.code === 1000){
						params["P_ACTION"] = "ADD";
						postCall(Object.assign(createParams(val),params)).then(res=>{
							if(res){
								if(res.code===200){
									doGetShoppingCount();
								}
							}
						})
					}
				}else{
					params["P_ACTION"] = "ADD";
					postCall(Object.assign(createParams(val),params)).then(res=>{
						if(res){
							if(res.code===200){
								doGetShoppingCount();
							}
						}
					})
				}
			})
		}else{
			params["P_ACTION"] = "ADD";
			postCall(Object.assign(createParams(val),params)).then(res=>{
				if(res){
					if(res.code===200){
						doGetShoppingCount();
					}
				}
			})
		}
		
		
		
		// params["P_ACTION"] = "QUERYALLCOUNT";
		// postCall(params).then(res=>{
		// 	if(res){
		// 		if(res.code===200){
		// 			if(res.data.DATASET.length>0){
		// 				store.state.shopingBadge = res.data.DATASET[0].sumcount;
		// 			}
		// 		}
		// 	}
		// })
	}
	
	let toDoShopping = (val) =>{
		uni.navigateTo({
			url: '/pages/shop/shop-view'
		})
	}
	
</script>

<style scoped>
page{
	overflow-x: hidden;
}

/* 通用tabbar占位符处理 - 使用更强的选择器 */
::v-deep .tn-tabbar__placeholder,
::v-deep .tn-tabbar__placeholder.tn-u-safe-area,
:deep(.tn-tabbar__placeholder),
:deep(.tn-tabbar__placeholder.tn-u-safe-area),
uni-view.tn-tabbar__placeholder,
uni-view.tn-tabbar__placeholder.tn-u-safe-area,
.tn-tabbar__placeholder,
.tn-tabbar__placeholder.tn-u-safe-area {
	display: none !important;
	height: 0 !important;
	width: 0 !important;
	z-index: -9999 !important;
	position: absolute !important;
	top: -999999px !important;
	left: -999999px !important;
	pointer-events: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
	overflow: hidden !important;
}

/* #ifdef H5 */
:deep(.z-paging-content) {
	position: relative;
	z-index: 1;
}

.toolbar, .client-info, .shopping-cart {
	will-change: transform;
	transform: translateZ(999px);
	-webkit-transform: translateZ(999px);
}
/* #endif */


.header-class-app{
	height: 14vh !important;
	flex-direction: column
 } 

.header-class-wechat{
	height: 17vh !important;
	flex-direction: column
}
.header-class{
	height: 20vh !important;
	flex-direction: column
}

.search-class{
	/* background-color: #ffffff; */
	font-size: 0.875rem !important;
}
.icon-class{
	width: 15vw;
}

.dropdown-menu {
  position: relative;
  width: 30vw;
}
.dropdown-menu-item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}	


.dropdown-content {
  width: 90vw;
  height: 500rpx;
  background-color: #FFFFFF;
}
.uni-scroll-view-content{
	width: 90vw !important;
}
.tn-dropdown__content{
	width: 90vw !important;
	background-color: #000000 !important;
}
.image-class{
	width: 100%;
	height: 100%;
}

.preview-image {
	max-width: 80%;
	max-height: 50%;
	object-fit: contain;
	position: absolute; 
}

.cards-class {
    padding: 16rpx;
	background-color: #f5f6fa;
}

.product-card {
    background: #ffffff;
    border-radius: 16rpx;
    margin-bottom: 20rpx;
    display: flex;
    padding: 20rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
}

.product-image {
    width: 180rpx;
    height: 180rpx;
    border-radius: 12rpx;
    overflow: hidden;
    margin-right: 20rpx;
    flex-shrink: 0;
}

.product-image image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-content {
    flex: 1;
    min-width: 0;
}

.product-title {
    font-size: 28rpx;
    font-weight: 600;
    color: #333;
    margin-bottom: 12rpx;
    line-height: 1.4;
}

.product-info {
    margin-bottom: 8rpx;
}

.manufacturer, .spec {
    font-size: 24rpx;
    color: #666;
    display: block;
    margin-bottom: 4rpx;
}

.batch-info {
    font-size: 24rpx;
    color: #666;
    margin-bottom: 8rpx;
}

.stock-row {
    display: flex;
    gap: 20rpx;
    margin-bottom: 12rpx;
}

.stock, .total-stock {
    font-size: 24rpx;
    color: #666;
}

.price-row {
    display: flex;
    align-items: baseline;
    gap: 16rpx;
    margin-bottom: 16rpx;
}

.sale-price {
    font-size: 32rpx;
    color: #ff6b6b;
    font-weight: bold;
}

.retail-price {
    font-size: 24rpx;
    color: #999;
}

.action-section {
    display: flex;
    align-items: center;
    gap: 16rpx;
    background: #f8f9fa;
    padding: 12rpx;
    border-radius: 12rpx;
}

.quantity-control {
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 8rpx;
    overflow: hidden;
    border: 1rpx solid #eee;
}

.control-btn {
    width: 60rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32rpx;
    color: var(--tn-color-primary);
    background: #fff;
}

.control-btn:active {
    background: #f5f5f5;
}

.quantity-input {
    width: 80rpx;
    height: 60rpx;
    text-align: center;
    font-size: 28rpx;
    border-left: 1rpx solid #eee;
    border-right: 1rpx solid #eee;
}

.price-inputs {
    flex: 1;
    display: flex;
    gap: 12rpx;
}

.settle-input, .price-input {
    flex: 1;
    height: 60rpx;
    background: #fff;
    border-radius: 8rpx;
    border: 1rpx solid #eee;
    padding: 0 16rpx;
    font-size: 26rpx;
}

.add-cart {
    width: 60rpx;
    height: 60rpx;
    background: var(--tn-color-primary);
    border-radius: 8rpx;
    display: flex;
    align-items: center;
    justify-content: center;
}

.notice-text {
    font-size: 24rpx;
    color: #3498db;
    margin-top: 12rpx;
    display: block;
}

.popup-class{
	text-align: center;
	overflow-y: auto;
}
.popup-class-title{
	width: 80vw;
	text-align: left;
	overflow-y: auto;
}
.num-class{
	display: flex;
}
.search-his-class{
	height: 10vh;
}


.order-section {
    margin-top: 24rpx;
    padding: 20rpx;
    background: linear-gradient(to bottom, #ffffff, #f8f9fa);
    border-radius: 16rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
}

.input-group {
    margin-bottom: 20rpx;
}

.input-header {
    display: flex;
    align-items: center;
    margin-bottom: 8rpx;
}

.input-label {
    font-size: 26rpx;
    color: #666;
    margin-right: 8rpx;
}

.currency-symbol {
    font-size: 24rpx;
    color: #999;
}

.price-input {
    height: 72rpx;
    background: #ffffff;
    border: 1rpx solid #e5e7eb;
    border-radius: 12rpx;
    padding: 0 24rpx;
    font-size: 30rpx;
    color: #333;
    transition: all 0.3s ease;
}

.price-input:focus {
    border-color: var(--tn-color-primary);
    box-shadow: 0 0 0 2rpx rgba(var(--tn-color-primary-rgb), 0.1);
}

.stepper {
    display: flex;
    align-items: center;
    background: #ffffff;
    border-radius: 12rpx;
    border: 1rpx solid #e5e7eb;
    overflow: hidden;
}

.stepper-btn {
    width: 72rpx;
    height: 72rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f9fa;
    transition: all 0.2s ease;
}

.stepper-btn.disabled {
    opacity: 0.5;
}

.stepper-btn:active {
    background: #e5e7eb;
}

.btn-icon {
    font-size: 36rpx;
    color: var(--tn-color-primary);
    font-weight: bold;
}

.stepper-input {
    width: 120rpx;
    height: 72rpx;
    text-align: center;
    font-size: 30rpx;
    color: #333;
    background: #ffffff;
    border-left: 1rpx solid #e5e7eb;
    border-right: 1rpx solid #e5e7eb;
}

.cart-btn {
    margin-top: 32rpx;
    height: 80rpx;
    background: var(--tn-color-primary);
    border-radius: 40rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4rpx 12rpx rgba(var(--tn-color-primary-rgb), 0.2);
    transition: all 0.3s ease;
}

.cart-btn:active {
    transform: translateY(2rpx);
    box-shadow: 0 2rpx 6rpx rgba(var(--tn-color-primary-rgb), 0.2);
}

.cart-icon {
    font-size: 36rpx;
    color: #ffffff;
    margin-right: 8rpx;
}

.cart-text {
    font-size: 28rpx;
    color: #ffffff;
    font-weight: 500;
}

.header-container {
    background: linear-gradient(135deg, #f8f9ff 0%, #f0f2f9 100%);
    padding-bottom: 8rpx;
    position: relative;
    overflow: visible;
    position: sticky;
    top: 0;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.04);
    z-index: 99999 !important;
}

.header-container::before {
    display: none;
}

.toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16rpx 24rpx;
    background: transparent;
    position: relative;
    z-index: 20090;
}

.client-info {
    display: flex;
    align-items: center;
    gap: 12rpx;
    padding: 12rpx 20rpx;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 16rpx;
    transition: all 0.3s ease;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
    backdrop-filter: blur(10px);
    border: 1rpx solid rgba(255, 255, 255, 0.8);
    position: relative;
    z-index: 102;
    cursor: pointer;
	width: 75vw;
}

.client-info:active {
    background: rgba(255, 255, 255, 0.85);
    transform: translateY(1rpx);
}

.client-avatar {
    width: 56rpx;
    height: 56rpx;
    background: rgba(var(--tn-color-primary-rgb), 0.1);
    border-radius: 12rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1rpx solid rgba(var(--tn-color-primary-rgb), 0.15);
}

.client-info-content {
    display: flex;
    align-items: center;
    gap: 8rpx;
}

.client-name {
    font-size: 28rpx;
    color: #2A2F3C;
    font-weight: 600;
    max-width: 56vw;
}

.shopping-cart {
    width: 72rpx;
    height: 72rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 16rpx;
    transition: all 0.3s ease;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
    backdrop-filter: blur(10px);
    border: 1rpx solid rgba(255, 255, 255, 0.8);
    position: relative;
    z-index: 102;
    cursor: pointer;
}

.shopping-cart:active {
    background: rgba(255, 255, 255, 0.85);
    transform: translateY(1rpx);
}

.search-box {
    padding: 0 24rpx;
    margin-bottom: 12rpx;
    position: relative;
    z-index: 20090;
}

::v-deep .tn-search-box {
    height: 76rpx;
    background: rgba(255, 255, 255, 0.95);
    border: 1rpx solid rgba(var(--tn-color-primary-rgb), 0.15);
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
    backdrop-filter: blur(10px);
}


.scroll-view {
    white-space: nowrap;
}

.nav-list {
    display: inline-flex;
    gap: 16rpx;
}

.nav-item {
    position: relative;
    padding: 12rpx 24rpx;
    font-size: 26rpx;
    color: #666666;
    background: rgba(var(--tn-color-primary-rgb), 0.05);
    border-radius: 15rpx;
    transition: all 0.3s ease;
    cursor: pointer;
    border: 1rpx solid rgba(var(--tn-color-primary-rgb), 0.1);
}

.nav-item:active {
    opacity: 0.8;
    transform: translateY(1rpx);
}

.nav-item.is-active {
    color: #ffffff;
    background: var(--tn-color-primary);
    font-weight: 600;
    border: none;
    box-shadow: 0 4rpx 12rpx rgba(var(--tn-color-primary-rgb), 0.2);
}

.text-cut {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* H5特定样式 */
/* #ifdef H5 */
::v-deep .tn-tabbar__placeholder,
::v-deep .tn-tabbar__placeholder.tn-u-safe-area {
    display: none !important;
    height: 0 !important;
    z-index: -1 !important;
    position: absolute !important;
    pointer-events: none !important;
    visibility: hidden !important;
}

.header-container {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 20090 !important;
    background: #ffffff !important;
    pointer-events: auto !important;
}

.toolbar {
    position: relative !important;
    z-index: 99999 !important;
    pointer-events: auto !important;
}

.client-info {
    position: relative !important;
    z-index: 99999 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

.client-info-content {
    position: relative !important;
    z-index: 20092 !important;
    pointer-events: auto !important;
}

.shopping-cart {
    position: relative !important;
    z-index: 20092 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}

.search-box {
    position: relative !important;
    z-index: 20091 !important;
    pointer-events: auto !important;
}

.nav-container {
    position: relative !important;
    z-index: 20091 !important;
    pointer-events: auto !important;
}

/* 确保内容区域不被遮挡 */
.cards-class {
    position: relative !important;
    margin-top: calc(3.125rem + 220rpx) !important;
    z-index: 1 !important;
}

/* 确保搜索框在H5中正确显示 */
::v-deep .tn-search-box {
    position: relative !important;
    z-index: 20091 !important;
    pointer-events: auto !important;
}

/* 状态栏样式 */
.status_bar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 20089 !important;
    background: linear-gradient(135deg, #f8f9ff 0%, #f0f2f9 100%);
    pointer-events: none !important;
}
/* #endif */

/* 通用样式 */
.header-container {
    background: #ffffff;
    padding-bottom: 8rpx;

    top: 0;
}

/* 添加触摸反馈效果 */
@media (hover: hover) {
    .client-info:hover, .shopping-cart:hover {
        background: rgba(255, 255, 255, 0.95);
        transform: translateY(-1rpx);
    }
}

/* 确保图标颜色正确显示 */
::v-deep .tn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

</style>
